import { useRef, useState } from "react";
import { RuleTree } from "@alipay/techui-rule-tree";
import type { FormInstance } from "antd";
import { Form, Input } from "antd";
import { AlipayOutlined } from "@ant-design/icons";

export default function App() {
  const [value, setValue] = useState({});
  const formRef = useRef<FormInstance>();

  return (
    <div>
      <RuleTree<{ name: string }>
        formRef={formRef}
        onChange={(value) => {
          setValue(value);
        }}
        dragLayerRender={() => (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              backgroundColor: "#336ff6",
              padding: "8px",
              borderRadius: "8px",
            }}
          >
            <AlipayOutlined style={{ color: "#fff", fontSize: 36 }} />
          </div>
        )}
        defaultValue={{
          relation: "and",
          children: [
            {
              name: "A",
            },
            {
              name: "B",
            },
          ],
        }}
      >
        {(field) => {
          return (
            <Form.Item
              noStyle
              name={[field.name, "name"]}
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
          );
        }}
      </RuleTree>
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </div>
  );
}
